<script lang="ts" setup>
   import { computed } from 'vue'

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Boolean,
      default: true
    },
    back: {
      type: Boolean,
      default: true
    },
    relative: {
      type: Boolean,
      default: false
    }
  })

   const containerStyle = computed(() => {
     const arr = ['page-container', props.back ? 'page-container-back' : '']
     if (props.relative) arr.push('page-relative')
     else arr.push('page-abs')
     if (props.padding) arr.push('page-relative-pad')
     return arr
   })

</script>

<template>
  <div :class="containerStyle">
    <slot />
    <v-loading v-if="loading" />
  </div>
</template>

<style scoped lang="scss">
.page-relative{
  width:100%;
  height:100%;
  box-sizing: border-box;
  position:relative;
}
.page-abs{
  @include abs-group();
}

.page-relative-pad{
  padding: var(--w-page-padding)  ;
  box-sizing: border-box;
}

  .page-container{
    overflow-x:hidden;
    overflow-y: auto;
  }

  .page-container-back{
    background: var(--w-bg-box);
  }
</style>
